<template>
    <div class="QBDD">
      <div class="tou">
        <router-link to="/person">
          <img class="img1" src="../../assets/个人中心/1个人中心/jiantou.png"/>
        </router-link>
        <p>全部订单</p>
        <span>编辑</span>
      </div>
      <div class="qbdd_tab">
        <ul class="qbdd_nav">
          <li @click="" class="xuanzhong">全部订单</li>
          <li @click="">待支付</li>
          <li @click="">待发货</li>
          <li @click="">待收货</li>
          <li @click="">交易完成</li>
          <span class="qbdd_line"></span>
        </ul>
        <div class="qbdd_con">
          <!--全部订单-->
          <div class="show">
            <all></all>
          </div>
          <div>
            <dzf></dzf>
          </div>
          <div>
            <dfh></dfh>
          </div>
          <div>
            <dsh></dsh>
          </div>
          <div>
            <jywc></jywc>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  export default{
    methods:{
      // ...
    },
    components:{

    }
  }
</script>

<style scoped>
  .tou{
    width: 100%;
    height: 2.666rem;
    background: #e53e42;
    position: fixed;
    top: 0;
  }
  .tou .img1{
    width: 0.638rem;
    height: 1.055rem;
    position: absolute;
    top: 0.805rem;
    left: 0.555rem;
  }
  .tou p{
    left: 6.2rem;
    position: absolute;
    bottom: 0.972rem;
    height: 0.972rem;
    font-family: MicrosoftYaHei;
    font-size: 1rem;
    letter-spacing: 0px;
    color: #ffffff;
  }
  .tou span{
    position: absolute;
    right: 0.555rem;
    bottom: 0.833rem;
    height: 0.833rem;
    font-family: MicrosoftYaHei;
    font-size: 0.7rem;
    line-height: 1rem;
    letter-spacing: 0px;
    color: #ffffff;
  }

  /*切换部分*/
  .qbdd_tab{
    width: 100%;
  }
  .qbdd_nav{
    border-bottom: 0.027777rem solid #cccccc;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 2.222222rem;
    position: relative;
    top: 2.66rem;
    left: 0;
    overflow: hidden;
  }
  .qbdd_nav>li{
    text-align: center;
    width: 8rem;
    font-size: 0.65rem;
    color: black;
    padding-left: 0.5rem;
  }
  .qbdd_nav .xuanzhong{
    color: #E53E42;
  }
  .qbdd_con>div{
    display: none;
  }
  .qbdd_con>div.show{
    display: block;
  }
  .qbdd_line {
    position: absolute;
    width: 3.388888rem;
    height: 0.055555rem;
    background: #E53E42;
    left:0.3rem;
    bottom: 0;
  }
</style>
